<template>
	<view class="page-wrap">
		<scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
			<view class="list-item" v-for="(item, index) in list" :key="index" @click="handleTest">
				<view class="avatar">{{item}}</view>
				<view class="info">
					<view class="info-item"></view>
					<view class="info-item"></view>
				</view>
			</view>
		</scroll-list>
	</view>
</template>

<script>
	import scrollList from '@/components/scroll-list/scroll-list.vue'
	export default {
		components: {
			'scrollList': scrollList,
		},
		data() {
			return {
				option: {
					size: 10,
					auto: true
				},
				list: []
			};
		},
		onHide() {},
		methods: {
			// 加载数据
			load() {
				for (var i = 0; i < 1; i++) {
					this.list.push(new Date());
				}
				// 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
				this.$refs.list.loadSuccess({
					list: this.list,
					total: 10
				});
				// 加载失败
				// this.$refs.list.loadFail()
			},
			// 刷新刷剧
			refresh() {
				setTimeout(() => {
					for (var i = 0; i < 1; i++) {
						this.list.push(i);
					}
					// 刷新成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
					this.$refs.list.refreshSuccess({
						list: this.list,
						total: 10
					});
					// 刷新失败
					// this.$refs.list.refreshFail()
				}, 200);
			}
		}
	};
</script>

<style scoped>
	.avatar {
		height: 200rpx;
		border: 1px solid red;
		background-color: #4CD964;
		margin: 40rpx 20rpx;
		border-radius: 20rpx;
	}
</style>
